<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--====== Required meta tags ======-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--====== Title ======-->
    <title>竞赛现场</title>
    <!--====== Favicon Icon ======-->
    <script th:src="@{https://cdn.jsdelivr.net/npm/vue/dist/vue.js}"></script>
    <script th:src="@{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/search.css}">
    <!--====== Flaticon css ======-->
    <link rel="stylesheet" th:href="@{/css/flaticon.css}">
    <!--====== FontAwesome css ======-->
    <link rel="stylesheet" th:href="@{/css/all.min.css}">
    <!--====== Bootstrap css ======-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!--====== magnific-popup css ======-->
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
    <!--====== Slick-popup css ======-->
    <link rel="stylesheet" th:href="@{/css/slick.css}">
    <!--====== Jquery UI css ======-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
    <!--====== Nice Select css ======-->
    <link rel="stylesheet" th:href="@{/css/nice-select.css}">
    <!--====== Animate css ======-->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!--====== Default css ======-->
    <link rel="stylesheet" th:href="@{/css/default.css}">
    <!--====== Style css ======-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!--====== Index css ======-->
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>
<!--====== Start Preloader ======-->
<div class="preloader">
    <div class="loader">
        <div class="pre-shadow"></div>
        <div class="pre-box"></div>
    </div>
</div><!--====== End Preloader ======-->
<!--====== Search From ======-->
<div class="modal fade search-modal" id="search-modal">
    <div class="modal-dialog modal-dialog-centered" style="width: 800px;max-width: 90%">
        <div class="modal-content">
            <!--前台白底显示-->
            <div id="app">
                <div class="search-wrapper" style="border-radius:4px">
                    <div class="mb-3">
                        <span class="search-title">本地搜索</span>
                        <span class="float-right" @click="searchFlag = false">
<!--            <i class="material-icons">close</i>-->
          </span>
                    </div>
                    <div class="search-input-wrapper">
                        <!--                                <i class="material-icons">search</i>-->
                        <input v-model="keywords" placeholder="输入文章标题或内容..." style="border:none"/>
                    </div>
                    <div class="search-result-wrapper">
                        <hr class="divider" />
                        <ul>
                            <li class="search-reslut" v-for="item of articleList" :key="item.id">
                                <a @click="goTo(item.id)" v-html="item.articleTitle" style="text-decoration: none;border-bottom: 1px solid white;"></a>
                                <p class="search-reslut-content text-justify" v-html="item.articleContent"></p>
                            </li>
                        </ul>
                        <div v-show="flag && articleList.length == 0" style="font-size:0.875rem">
                            找不到您查询的内容：{{ keywords }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!--====== Search From ======-->
<!--====== Start Header ======-->
<header class="header-area transparent-header">
    <!--=== Header Navigation ===-->
    <div class="header-navigation navigation-two navigation-white">
        <div class="nav-overlay"></div>
        <div class="container-fluid">
            <!--=== Primary Menu ===-->
            <div class="primary-menu">
                <!--=== Site Branding ===-->
                <div class="site-branding">
                    <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-white.png}" alt="Site Logo"></a>
                </div>
                <!--=== Nav Inner Menu ===-->
                <div class="nav-menu">
                    <!--=== Mobile Logo ===-->
                    <div class="mobile-logo mb-30 d-block d-xl-none text-center">
                        <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                    </div>
                    <!--=== Nav Search ===-->
                    <!--                            <div class="nav-search mb-30 d-block d-xl-none ">-->
                    <!--                                <form>-->
                    <!--                                    <div class="form_group">-->
                    <!--                                        <input type="email" class="form_control" placeholder="Search Here" name="email" required="">-->
                    <!--                                        <button class="search-btn"><i class="fas fa-search"></i></button>-->
                    <!--                                    </div>-->
                    <!--                                </form>-->
                    <!--                            </div>-->
                    <!--=== Main Menu ===-->
                    <nav class="main-menu">
                        <ul>
                            <li class="menu-item "><a th:href="@{/}">首页</a></li>
                            <li class="menu-item has-children"><a >竞赛</a>
                                <ul class="sub-menu">
                                    <li><a th:href="@{/front/news_list}">竞赛新闻</a></li>
                                    <li><a th:href="@{/front/notices_list}">竞赛通知</a></li>
                                    <li><a th:href="@{/front/answers_list}">竞赛题解</a></li>
                                    <li><a th:href="@{/front/gallerys_list}">竞赛现场</a></li>
                                </ul>
                            </li>
                            <li class="menu-item "><a th:href="@{/front/peoples_list}">名人堂</a>
                            </li>
                            <li class="menu-item "><a th:href="@{/about}">竞赛报名</a>
                            </li>
                            <li class="menu-item"><a th:href="@{http://acm.zut.edu.cn/}">竞赛转播</a></li>
                            <li class="menu-item"><a th:href="@{/contact}">加入我们</a></li>
                            <li class="menu-item"><a class="search-btn" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal"><i class="far fa-search"></i></a></li>
                        </ul>
                    </nav>
                    <!--=== Nav Button ===-->
                    <!--                            <div class="menu-button mt-40 d-xl-none">-->
                    <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                    <!--                            </div>-->
                </div>
                <!--=== Nav right Item ===-->
                <div class="nav-right-item d-flex align-items-center">
                    <!--                            <div class="menu-button d-xl-block d-none">-->
                    <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                    <!--                            </div>-->
                    <li class="menu-item" style="list-style: none;margin-top: 10px">
                        <a class="search-btn" style="color: #fff;font-size: 30px;display: none;" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal">
                            <i class="far fa-search"></i>
                        </a>
                    </li>
                    <div class="navbar-toggler">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header><!--====== End Header ======-->
<!--====== Start Breadcrumb Section ======-->
<section class="page-banner light-red-bg pt-170 pb-170 bg_cover" th:style="'background-image: url(' + @{../image/page-bg-1.jpg} + ');'">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="page-banner-content text-center text-white">
                    <h1 class="page-title">竞赛现场</h1>
                    <ul class="breadcrumb-link text-white">
                        <li><a th:href="@{/}">竞赛</a></li>
                        <li class="active">竞赛现场</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section><!--====== End Breadcrumb Section ======-->
<!--====== Start Gallery Section ======-->
<section class="gallery-section pt-100 pb-60">
    <div class="container">
        <div class="row gallery-row">
            <!-- 循环遍历相册列表数据 -->
            <div th:each="item:${pageInfo.list}"
                 class="col-lg-4 col-md-6 col-sm-12 gallery-column cat-1 cat-5" >
                <div class="single-gallery-item mb-25 wow fadeInUp">
                    <div class="gallery-img">
                        <!--封面-->
                        <img th:src="${item.getAlbumCover()}" alt="Gallery image">
<!--                        <div class="hover-overlay"></div>
                        点击进入相册详情页面-->
                        <div class="hover-content">
                            <a th:href="@{/photos_list/}+${item.getId()}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="gallery-content">
                        <h4 class="title" th:text="${item.getAlbumName()}"></h4>
<!--                        <a th:href="${album.detailPageUrl}" class="cat-link"></a>-->
                    </div>
                </div>
            </div>
        </div>
        <!--        分页-->
        <div class="row">
            <div class="col-lg-12">
                <div class="vedhak-pagination text-center mt-30 wow fadeInUp pagination">
                    <ul>
                        <li><a th:href="@{/front/gallerys_list(pageNum=1,pageSize=6)}">首页</a></li>

                        <li th:classappend="${!pageInfo.hasPreviousPage} ? 'disabled'">
                            <a th:href="@{${!pageInfo.hasPreviousPage} ? 'javascript:void(0)': '/front/gallerys_list?pageNum='+( ${pageInfo.pageNum}-1 )+'&pageSize=6'}"><i class="fas fa-angle-left"></i></a>
                        </li>


                        <ul>
                            <!-- 如果页码小于等于5，正常显示 -->
                            <li th:if="${pageInfo.pages <= 5}" th:each="i : ${#numbers.sequence(1, pageInfo.pages)}">
                                <a th:href="@{/front/gallerys_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                            </li>

                            <!-- 如果页码大于5，只显示前3页和后2页 -->
                            <li th:if="${pageInfo.pages > 5}">
                                <!-- 前三页 -->
                                <span th:each="i : ${#numbers.sequence(1, 3)}">
                                            <a th:href="@{/front/gallerys_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                                        </span>

                                <!-- 省略号 -->
                                <span>.....</span>

                                <!-- 后两页 -->
                                <span th:each="i : ${#numbers.sequence(pageInfo.pages - 1, pageInfo.pages)}">
                                            <a th:href="@{/front/gallerys_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                                        </span>
                            </li>
                        </ul>

                        <li th:classappend="${!pageInfo.hasNextPage} ? 'disabled'">
                            <a th:href="@{${!pageInfo.hasNextPage} ? 'javascript:void(0)': '/front/gallerys_list?pageNum='+( ${pageInfo.pageNum}+1 )+'&pageSize=6'}"><i class="fas fa-angle-right"></i></a>
                        </li>

                        <li><a th:href="@{'/front/gallerys_list?pageNum='+${pageInfo.pages}+ '&pageSize=' + 6}">尾页</a></li>

                        <li>共[[${pageInfo.total}]]条</li>
                        <li>当前第[[${pageInfo.pageNum}]]/[[${pageInfo.pages}]]页</li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Gallery Section ======-->

<!--====== Back To Top  ======-->
<a th:href="@{/index0}" class="back-to-top"><i class="far fa-angle-up"></i></a>
<!--====== Jquery js ======-->
<script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script><script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<!--====== Bootstrap js ======-->
<script th:src="@{/js/popper.min.js}"></script>
<!--====== Bootstrap js ======-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--====== Slick js ======-->
<script th:src="@{/js/slick.min.js}"></script>
<!--====== Magnific js ======-->
<script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<!--====== Isotope js ======-->
<script th:src="@{/js/isotope.min.js}"></script>
<!--====== Imagesloaded js ======-->
<script th:src="@{/js/imagesloaded.min.js}"></script>
<!--====== Counterup js ======-->
<script th:src="@{/js/jquery.counterup.min.js}"></script>
<!--====== Waypoints js ======-->
<script th:src="@{/js/jquery.waypoints.js}"></script>
<!--====== Nice-select js ======-->
<script th:src="@{/js/jquery.nice-select.min.js}"></script>
<!--====== jquery UI js ======-->
<script th:src="@{/js/jquery-ui.min.js}"></script>
<!--====== WOW js ======-->
<script th:src="@{/js/wow.min.js}"></script>
<!--====== Main js ======-->
<script th:src="@{/js/theme.js}"></script>
<script>
    new Vue({
        el: "#app",
        data: function() {
            return {
                keywords: "",
                articleList: [],
                flag: false,
                searchFlag: false
            };
        },
        methods: {
            goTo(articleId) {
                this.searchFlag = false;
                window.location.href = "/blogs/" + articleId;
            }
        },
        watch: {
            keywords(value) {
                this.flag = value.trim() != "" ? true : false;
                axios
                    .get("/articles/search", {
                        params: { current: 1, keywords: value }
                    })
                    .then(({ data }) => {
                        this.articleList = data.data;
                    });
            }
        }
    });
</script>
</body>
</html>